<template>
  <!-- 查询的form表单 有时间的 -->
  <el-form ref="elForm" :model="formData" size="medium" label-width="1.3rem">
    <el-row>
      <el-col :span="5">
        <el-row>
          <el-form-item label="变电站：">
            <el-select
              v-model="formData.stationId"
              placeholder="请选择"
              clearable
              :style="{width: '100%'}"
              filterable
            >
              <el-option
                v-for="(item,index) in stationName_options"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-row>
          <el-form-item label="操作原因：">
            <el-select
              v-model="formData.reasonCode"
              placeholder="请选择"
              clearable
              :style="{width: '100%'}"
            >
              <el-option
                v-for="(item,index) in  unlockReason"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="5">
        <el-row>
          <el-form-item label="操作内容：">
            <el-input v-model="formData.handleContent" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-form-item label="操作时间段：">
          <el-date-picker
            :style="{width: '100%'}"
            v-model="formData.strtimeedntime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <div class="btn-ground centerbox">
          <el-button icon="iconfont iconsousuo" type="primary" @click="queryForm">查询</el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
import { publicAPIModule } from "@/store/modules/public";
@Component({
  components: {},
})
export default class FiveKeyDetails extends Vue {
  // 电压
  voltage: Array<object> = [];
  // 厂家名称
  manufacturerName: Array<object> = [];
  //   解锁原因
  unlockReason: Array<object> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "1",
      label: "紧急解锁",
    },
    {
      value: "2",
      label: "防误装置异常解锁",
    },
    {
      value: "3",
      label: "电气设备异常解锁",
    },
    {
      value: "4",
      label: "电气设备检修解锁",
    },
    {
      value: "5",
      label: "归还钥匙",
    },
  ];
  formData = {
    stationId: "",
    reasonCode: "",
    handleContent: "",
    strtimeedntime: [],
  };

  get stationName_options() {
    return publicAPIModule.SubstationList;
  }

  // 查询
  queryForm() {
    this.$emit("queryForm", this.formData);
  }
}
</script>

<style lang="scss" scoped>
</style>